<template>
    <div>
        <div class="wcgnk">
            <div class="center">
                <div class="zhengti">
                    <div class="yi">
                        <h2>服务详情</h2>
                        <div class="zhengti1">
                            <img :src="detail.simg" alt="">
                            <div>
                                <h2>{{ detail.title }}</h2>
                                <p>价格 &nbsp;&nbsp;&nbsp;<span><strong>{{ detail.show_price }} </strong> {{ detail.unit }}</span></p>
                                <p class="guige">
                                    <span>规格</span>
                                    <div>
                                        <span 
                                        v-for="(item,i) in specifications" 
                                        :key="i" 
                                        @click="handle(item,i)"
                                        :class="{active:act==i}"
                                        >{{ item.specif }}</span>
                                    </div>
                                </p>
                                <p class="duiqi">
                                    <a>数量</a> 
                                    <counter type="inline" :data="detail.count"></counter>
                                </p>
                                <button class="btn" @click="toBuy">立即预约</button>
                            </div>
                        </div>
                    </div>
                    <div class="zhengti2">
                        <h3>服务描述</h3>
                        <div>
                            <div class="fwms" v-html="detail.sdecr">
                                
                            </div>
                        </div>
                            <h3>订购须知</h3>   
                        <div>
                            <div class="dgxz">
                                <p>1.该项目由到位商家实人接单、规范服务；</p>
                                <p>2.严拒一切非正规服务及要求，举报有奖；</p>
                                <p>3.接单后修改订单或退单需提前2小时告知；</p>
                                <p>4.服务前2小时内退单将按30元/人扣空单费；</p>
                                <p>5.如商家接单后爽约将全额退款并加赔30元；</p>
                                <p>6.服务中提特殊要求，将不予服务不退余款；</p>
                                <p>7.为保障您的权益，所有费用请在到位支付。</p>
                            </div>
                        </div>
                    </div>
                    <div class="changtu">
                        <img v-for="(item,i) in srcdesc" :key="i" :src="item" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import httpApi from '@/http';
import { useRoute } from 'vue-router';
import {reactive,ref} from 'vue'
import details from '@/types/details'
import counter from '@/components/counter.vue'
import router from '@/router';
interface specif{
    specif:string,
    sprice:string,
    unit:string
}
    let detail = ref<details>({})
    let guige={}
    let act = ref<number>(0)
    let srcdesc = ref<[]>()
    let specifications = reactive<specif[]>([])
    let id = useRoute().params.id
    httpApi.fuwudetail.queryServeDetail({id}) .then((result) => {
    let data = result.data.data[0]
    detail.value=data
    srcdesc.value =JSON.parse(data.srcdesc)
    let specif = JSON.parse(data.specifications)
    specifications=specif.length>1? specif:''
   })
   function handle (x:specif,a:number){
    console.log(x);
    act.value = a
    detail.value.show_price = x.sprice
    detail.value.unit = x.unit
    guige=x
    guige.id=useRoute().params.id
   }
   
   function toBuy(){
    router.push({
        name:'buy',
        query:guige
    })
   }
</script>

<style lang="scss" scoped>
    *{
        margin: 0;
        padding: 0;
    }
    .btn{
        width: 150px;
        line-height: 50px;
        font-size: 20px;
        margin-top: 25px;
        border-radius: 5px;
        border: none;
        background-color: #CA3544;
        color: #fff;
    }
    .wcgnk{
        background-color: #FDF7F8;
    }
    .center{
        width: 1200px;
        margin: 0 auto;
    }
    .yi>h2{
        margin-left: 30px;
        padding-top: 16px;
        color: #333;
    }
    .zhengti{
        background-color: white;
        img{
            border-radius: 5px;
        }
    }
    .zhengti1>div{
        padding: 30px 0 0 20px;
    }
    .zhengti1>div>p{
        padding-top: 5px;
        font-size: 14px;
        color: #8C8C8C;
    }
    .zhengti1>div>p:nth-child(2)>span{
        color: red;
    }
    .zhengti1>div>p:nth-child(4)>span{
        display: inline-block;
        border: 1px solid #D9D9D9;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        font-size: 18px;
    }
    .zhengti1>div>p:nth-child(4)>span:nth-child(1){
        color: red;
    }
    .zhengti1>div>p:nth-child(4)>span:nth-child(2){
        width: 40px;
    }
    .zhengti1>div>p:nth-child(4)>span:nth-child(3){
        color: red;
    }
    .zhengti1>div>h3:nth-child(5){
        padding: 100px 0 0 30px;
        color: #333;
    }
    .zhengti1>div>h2{
        color: #333;
    }
    strong{
        font-size: 26px;
    }
    .zhengti1{
        display: flex;
        position: relative;
    }
    .zhengti1>img{
        height: 300px;
        margin: 30px;
    }
    .ewm{
        text-align: center;
        position: absolute;
        top: 7%;
        right: 3%;
    }
    .ewm>h4{
        padding: 10px 0;
    }
    .ewm>h3{
        color: red;
    }
    .zhengti2{
        padding: 35px 20px 0 20px;
    }
    .zhengti2>div{
        background-color: #F5F5F5;
    }
    .fwms{
        padding: 20px 0 20px 20px;
        font-size: 14px;
        color: #333;
    }
    .zhengti2>h3{
        margin: 10px 0;
        color: #333;
    }
    .dgxz{
        padding: 20px 0 20px 20px;
        font-size: 14px;
        color: #333;
    }
    .changtu>img{
        display: block;
        width: 750px;
    }
    .changtu{
        margin: 20px 0px 20px 225px;
    }
    .guige{
        display: flex;
        color: #8c8c8c;
        margin-top: 15px;
        div{
            width: 600px;
            margin-left: 15px;
            color: #333;
            span{
                display: inline-block;
                padding: 5px 10px;
                font-size: 16px;
                margin-right: 15px;
                text-align: center;
                line-height: 25px;
                border: 2px solid #ccc;
                margin-bottom: 10px;
                cursor: pointer;
                &.active{
                    border-color: red;
                }
            }
        }
    }
    .counter{
        margin-left: 15px;
    }
</style>